<?php
@session_start();
$loading = 'Load on session';
include_once 'main.inc.php';
include_once 'chinese/functions.php';
include_once 'functions.datastore.php';
$session_key = 'c';
if ((isset($_GET['reload'])) || (!isset($_SESSION[$session_key]))) {
    $memcache = new Memcache();
    $vocab = $memcache->get("c${year}");
    $loading = 'Load on cache';
    if (isset($_GET['reload']) || (!$vocab)) {
        $vocab = fetch_vocab();
        $memcache->set("c${year}", $vocab);
        $loading = 'Load on remote site';
    }
    if (!isset($_SESSION[$session_key])) $_SESSION[$session_key] = array();
    $_SESSION[$session_key]['vocab'] = $vocab;
}
// Shuffle
if (!isset($_COOKIE[$session_key.'-shuffle'])) $_COOKIE[$session_key.'-shuffle'] = 1;
$shuffle = $_COOKIE[$session_key.'-shuffle'];
$shuffle_overturn = ($shuffle == 1 ? 0 : 1);
//// Chinese
//if (!isset($_COOKIE[$session_key.'c'])) $_COOKIE[$session_key.'c'] = 1;
//$show_c = $_COOKIE[$session_key.'c'];
//$show_c_overturn = ($show_c == 1 ? 0 : 1);
//$show_c = ($show_c == 1 ? 'show' : 'hide');
//// Pinyin
//if (!isset($_COOKIE[$session_key.'p'])) $_COOKIE[$session_key.'p'] = 1;
//$show_p = $_COOKIE[$session_key.'p'];
//$show_p_overturn = ($show_p == 1 ? 0 : 1);
//$show_p = ($show_p == 1 ? 'show' : 'hide');
//// Vietnamese
//if (!isset($_COOKIE[$session_key.'v'])) $_COOKIE[$session_key.'v'] = 1;
//$show_v = $_COOKIE[$session_key.'v'];
//$show_v_overturn = ($show_v == 1 ? 0 : 1);
//$show_v = ($show_v == 1 ? 'show' : 'hide');

$vocab = $_SESSION[$session_key]['vocab'];
if (isset($_GET['month'])) {
    $_SESSION[$session_key]['month'] = $_GET['month'];
} elseif (!isset($_SESSION[$session_key]['month'])) {
    $_SESSION[$session_key]['month'] = key($vocab);
}
$month = $_SESSION[$session_key]['month'];
if (isset($_GET['day'])) {
    $_SESSION[$session_key]['day'] = $_GET['day'];
} elseif (!isset($_SESSION[$session_key]['day'])) {
    $_SESSION[$session_key]['day'] = key($vocab[$month]);
}
$day = $_SESSION[$session_key]['day'];
$date_time = strtotime("2014-${month}-${day}");
// Learned
if (!isset($_SESSION[$session_key]['card_info'])) {
    $card_info = get_cn_card_info();
    $_SESSION[$session_key]['card_info'] = $card_info;
}
if (isset($_COOKIE["{$session_key}-learned"]) && ($_COOKIE["{$session_key}-learned"] != 0)) {
    $key = $_COOKIE["{$session_key}-learned"];
    unset($_COOKIE["{$session_key}-learned"]);
    setcookie("{$session_key}-learned", '', time() - 3600); // empty value and old timestamp
    if (!isset($_SESSION[$session_key]['card_info'][$key])) {
        set_cn_card_learned_count($key, 1);
        $_SESSION[$session_key]['card_info'][$key] = 1;
    } else {
        $new_key_value = $_SESSION[$session_key]['card_info'][$key] + 1;
        set_cn_card_learned_count($key, $new_key_value);
        $_SESSION[$session_key]['card_info'][$key] = $new_key_value;
    }
}
$card_info = $_SESSION[$session_key]['card_info'];

// Auto-learn mode
$card_learned_count = 0;
if (isset($card_info["{$month}-{$day}"])) $card_learned_count = $card_info["{$month}-{$day}"];
$show_v = 'show';
$show_p = 'show';
$show_c = 'show';
$show_a = 'show';
if ($auto_learn && ($card_learned_count > 0)) {
    $show_v = 'hide';
    $show_p = 'hide';
    $show_c = 'hide';
    $show_a = 'hide';
}
?>
<?php include_once('header.inc.php')?>
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <h2><?php
                echo date("D, M j, Y", $date_time);
                echo " [{$card_learned_count}]";
                ?>
            </h2>
            <?php
            echo '<div style="float: left">
                    <a class="btn btn-primary btn-sm" href="" title="Refresh">
                        <span class="glyphicon glyphicon-refresh"></span>
                    </a>
                    <a class="btn btn-primary btn-sm" href="?reload=1" title="Reload remote">
                        <span class="glyphicon glyphicon-repeat"></span>
                    </a>
                    <a id="btn_reset" class="btn btn-default btn-sm" title="Reset card">
                        <span class="glyphicon glyphicon-retweet"></span>
                    </a>
                </div>';
            echo '<div class="btn-group" style="float: right">
                    <a id="btn_auto_learn" class="btn btn-default '.($shuffle == 1 ? 'active' : '').' btn-sm" title="Shuffle">
                        <span class="glyphicon glyphicon-book"></span>
                    </a>
                    <a id="btn_shuffle" class="btn btn-default '.($shuffle == 1 ? 'active' : '').' btn-sm" title="Shuffle">
                        <span class="glyphicon glyphicon-random"></span>
                    </a>
                    <a class="btn btn-default btn-sm" id="btn_learned" title="Mark as learned">
                        <span class="glyphicon glyphicon-ok"></span>
                    </a>
                </div>';
            echo '<div style="clear: both"></div>
                <hr />';
            $day_words = $vocab[$month][$day];
            $day_words = explore_day_words($day_words);
            echo '<table class="words"><tr><th style="10%">
                    <a class="display_mode" id="a_show">
                        <span class="glyphicon ' . ($show_a == 'show' ? 'glyphicon-sort' : 'glyphicon-list') . '"></span>
                    </a>
                </th>
            <th style="width: 20%"><a class="display_mode" id="c_show">Chinese</a></th>
            <th style="width: 20%"><a class="display_mode" id="p_show">Pinyin</a></th>
            <th style="width: 50%"><a class="display_mode" id="v_show">Vietnamese</a></th></tr>';
            $index = 0;
            foreach ($day_words as $key => $word) {
                $index++;
                echo '<tr id="row_word_' . $index . '" class="word_row">
                <td id="word_learning_' . $index . '" class="word_learning"><a>' . $index . '</a></td><td class="word c_word" id="c_word_' . $index . '"><span class="'.$show_c.'">';
                echo '</span></td><td class="word p_word" id="p_word_' . $index . '"><span class="'.$show_p.'">';
                echo '</span></td><td class="word v_word" id="v_word_' . $index . '"><span class="'.$show_v.'">';
                echo '</span></td></tr>';
            }
            echo '</table>';
            ?>
        </div>
        <div class="col-md-4 sidebar">
            <nav><strong>Legends:</strong>
                <a class="btn btn-default btn-xs rank-0">0</a>
                <a class="btn btn-default btn-xs rank-1">1+</a>
                <a class="btn btn-default btn-xs rank-3">3+</a>
                <a class="btn btn-default btn-xs rank-6">6+</a>
                <a class="btn btn-default btn-xs rank-10">10+</a>
                <a class="btn btn-default btn-xs rank-15">15+</a>
                <a class="btn btn-default btn-xs rank-21">21+</a>
            </nav>
            <hr />
            <nav>
                <ul>
                    <?php
                        foreach ($vocab as $the_month => $the_day_words) {
                            echo '<li>';
                            echo '<strong>' . $the_month . ':</strong> ';
                            foreach ($the_day_words as $the_day => $words) {
                                $wi_key = "{$the_month}-{$the_day}";
                                $rank = 0;
                                if (isset($card_info[$wi_key])) $rank = $card_info[$wi_key];
                                if ($rank > 21) $rank = 21;
                                $disable = '';
                                if (($the_month == $month) && ($the_day == $day)) $disable = ' disabled';
                                echo '<a class="btn btn-default btn-xs rank-'.$rank. $disable .'" href="?month=' . $the_month . '&day=' . $the_day . '">' . $the_day . '</a> ';
                            }
                            echo '</li>';
                        }
                    ?>
                </ul>
            </nav>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <hr />
            <?php echo $loading?>
        </div>
    </div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
    var day_words = <?php echo json_encode($day_words)?>;
    var keys;
    var keys_shf;
    var a = 'show', c = "<?php echo $show_c?>", p = "<?php echo $show_p?>", v = "<?php echo $show_v?>";
    var is_shuffled = <?php echo $shuffle?>;
    $(document).ready(function(){
        keys = Object.keys(day_words);
        load_day_words();
        $('.btn-show').click(function(){
            var id = $(this).attr('id');
            var part = id.charAt(0);
            var mode = get_mode(part);
            if($(this).hasClass('active')) {
                $(this).removeClass('active');
                if (mode != 'show') swap(part);
                show_hide(part);
                $.cookie("<?php echo $session_key?>" + part, 0, { expires : 10 });
            } else {
                $(this).addClass('active');
                if (mode == 'show') swap(part);
                show_hide(part);
                $.cookie("<?php echo $session_key?>" + part, 1, { expires : 10 });
            }
        });
        $('#btn_learned').click(function(){
            if ($(this).hasClass('active')) {
                $(this).removeClass('active');
                $.cookie("<?php echo $session_key?>-learned", 0, { expires : 10 });
            } else {
                $(this).addClass('active');
                $.cookie("<?php echo $session_key?>-learned", '<?php echo "{$month}-{$day}";?>', { expires : 10 });
            }
        });
        $('#btn_shuffle').click(function(){
            if ($(this).hasClass('active')) {
                $(this).removeClass('active');
                is_shuffled = 0;
                $.cookie("<?php echo $session_key?>-shuffle", 0, { expires : 10 });
            } else {
                $(this).addClass('active');
                is_shuffled = 1;
                $.cookie("<?php echo $session_key?>-shuffle", 1, { expires : 10 });
            }
            load_day_words();
        });
        $('#btn_auto_learn').click(function(){
            if ($(this).hasClass('active')) {
                $(this).removeClass('active');
                $.cookie("<?php echo $session_key?>-auto_learn", 0, { expires : 10 });
            } else {
                $(this).addClass('active');
                $.cookie("<?php echo $session_key?>-auto_learn", 1, { expires : 10 });
            }
        });
        $('#btn_reset').click(function(){
            reset_day_words();
        });
    });
    function show_hide(part) {
        var mode = swap(part);
        $('.word').each(function(){
            var span = $('#' + $(this).attr('id') + ' > span');
            if ($(this).attr('id').charAt(0) == part) {
                span.attr('class', mode);
            }
        });
    }
//    function show_all(index) {
//        c = 'show';
//        p = 'show';
//        v = 'show';
//        $('.word').each(function(){
//            var w_index = $(this).attr('id').split('_')[2];
//            if ((index == 0) || (index == w_index)) {
//                var span = $('#' + $(this).attr('id') + ' > span');
//                span.attr('class', 'show');
//            }
//        });
//    }
    function show_hide_all() {
        if (a == 'show') {
            a = 'hide';
            $('#a_show > span').removeClass('glyphicon-sort');
            $('#a_show > span').addClass('glyphicon-list');
        } else {
            a = 'show';
            $('#a_show > span').removeClass('glyphicon-list');
            $('#a_show > span').addClass('glyphicon-sort');
        }
        c = a;
        p = a;
        v = a;
        $('.word').each(function(){
//            var w_index = $(this).attr('id').split('_')[2];
//            if ((index == 0) || (index == w_index)) {
            var span = $('#' + $(this).attr('id') + ' > span');
            span.attr('class', a);
//            }
        });
        if (a == 'hide') {
            is_shuffled = true;
            load_day_words();
            reset_learned_layout();
            set_learned_layout();
        }
    }
    function load_day_words() {
        keys_shf = keys.slice();
        if (is_shuffled) shuffle(keys_shf);
        for (i = 0; i < keys_shf.length; i++) {
            $('#c_word_' + (i + 1) + ' > span').text(day_words[keys_shf[i]].word);
            $('#p_word_' + (i + 1) + ' > span').text(day_words[keys_shf[i]].pinyin);
            $('#v_word_' + (i + 1) + ' > span').text(day_words[keys_shf[i]].meaning);
        }
    }
    function reset_day_words() {
        keys_shf = keys.slice();
        is_shuffled = false;
        set_mode_a('show');
        c = 'show';
        p = 'show';
        v = 'show';
        for (i = 0; i < keys_shf.length; i++) {
            $('#c_word_' + (i + 1) + ' > span').text(day_words[keys_shf[i]].word);
            $('#p_word_' + (i + 1) + ' > span').text(day_words[keys_shf[i]].pinyin);
            $('#v_word_' + (i + 1) + ' > span').text(day_words[keys_shf[i]].meaning);
            $('#c_word_' + (i + 1) + ' > span').attr('class', a);
            $('#p_word_' + (i + 1) + ' > span').attr('class', a);
            $('#v_word_' + (i + 1) + ' > span').attr('class', a);
        }
        reset_learned_layout();
        clean_day_word_learned();
    }
</script>
<script src="js/common.js"></script>
</body>
</html>